<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="insurance" label-width="80px">
      <el-form-item label="车牌号码" prop="carId">
        <template>
          <el-select v-model="insurance.carId"  clearable placeholder="请选择">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.carNo"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="保险编号" prop="insNo">
        <el-input v-model="insurance.insNo"></el-input>
      </el-form-item>

      <el-form-item label="开始日期" prop="insDate">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="insurance.insDate"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="保险种类" prop="insType">
        <template>
          <el-select v-model="insurance.insType" clearable placeholder="请选择">
            <el-option
              v-for="item in dictionaries"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="保险金额" prop="insAmount">
        <el-input v-model="insurance.insAmount"></el-input>
      </el-form-item>

      <el-form-item label="保险公司" prop="insUnit">
        <template>
          <el-select v-model="insurance.insUnit"  clearable placeholder="请选择">
            <el-option
              v-for="item in currentUnits"
              :key="item.id"
              :label="item.unitName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="结束日期" prop="expireDate">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="insurance.expireDate"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="经办人" prop="operator">
        <template>
          <el-select v-model="insurance.operator" clearable placeholder="请选择">
            <el-option
              v-for="item in driverList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="保险备注" prop="remarks">
        <el-input v-model="insurance.remarks"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="saveIns()"
        >保存记录
        </el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import InsApi from "@/api/insurance.js"

  export default {
    name: "add",
    data() {
      return {
        carList: {},
        dictionaries: {},
        currentUnits: {},
        driverList: {},
        insurance: {
          carId: "",
          insNo: "",
          insDate: "",
          insType: "",
          insAmount: "",
          insUnit: "",
          expireDate: "",
          operator: "",
          remarks: "",
        },
        rules: {
          carId: [
            { required: true, message: '请选择车牌号码', trigger: 'change' }
          ],
          insNo: [
            { required: true, message: '请输入保险编号', trigger: 'blur' }
          ],
          insDate: [
            { required: true, message: '请选择开始日期', trigger: 'change' }
            ],
          insType: [
            { required: true, message: '请选择保险种类', trigger: 'change' }
          ],
          insAmount: [
            { required: true, message: '请输入保险金额', trigger: 'blur' }
          ],
          insUnit: [
            { required: true, message: '请选择保险公司', trigger: 'change' }
          ],
          expireDate: [
            { required: true, message: '请选择结束日期', trigger: 'change' }
          ],
          operator: [
            { required: true, message: '请选择经办人', trigger: 'change' }
          ],
          remarks: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.findAll()
    },
    methods: {
      saveIns() {
        InsApi.saveIns(this.insurance).then(response => {
          this.$message({
            message: "添加成功",
            type: "success"
          })
          this.$router.push({path:"/daily_work/insurancelist"})
        })
      },
      findAll() {
        InsApi.findAll().then(response=>{
          this.carList=response.data.carList
          this.dictionaries=response.data.dictionaries
          this.currentUnits=response.data.currentUnits
          this.driverList=response.data.driverList
        })
      }
    }
  }
</script>

<style scoped>

</style>
